<template>
  <div class="oil-price">
    <div class="oil-price-title">
      <el-select v-model="curArea"
                 class="area-select"
                 filterable
                 size="small"
                 placeholder="请选择查询省份"
                 @change="onSel">
        <template v-slot:prefix>
          <span>查询省份:</span>
        </template>
        <el-option
            v-for="item in Areas"
            :key="item.value"
            :label="item.name"
            :value="item.value"
        />
      </el-select>
      <el-button type="primary"
                 size="small"
                 @click="toQuery">查询
      </el-button>
    </div>
    <el-table :data="options"
              style="width: 100%; margin-top: 10px; height: auto"
              border
              stripe>
      <el-table-column prop="name" label="油号">
        <template #default="scope">
          <span class="name-title">
            <el-image style="width: 20px; height: 20px; margin-right: 10px"
                      :src="logo" fit="fill"/>
            <span style="width: 25px;">{{ scope.row.name }}</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="今日价格" width="100" show-overflow-tooltip>
        <template #default="scope">
          <span style="font-weight: bold; color: #c45656">{{ scope.row.price }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>


<script lang="ts">
import {ref} from 'vue'
import areas from './areas.json'
import {getArea} from "@/api";
import {ElMessage} from "element-plus";
import {limitedTime} from "@/utils/tools";

export default {
  name: 'oilPrice',
  setup() {
    /* 数据源 */
    const logo = require('@/assets/images/qy.png')
    const curArea = ref<string>('安徽')
    let curAreaCache = localStorage.getItem(`MINITOOLBOX_oilPrice_curAreaCache`) || ''
    const Areas = ref([
      ...areas
    ])
    const onSel = (sel: string) => {
      curArea.value = sel
    }
    const options = ref<any>([])
    const toQuery = async () => {
      options.value = []
      console.log(curArea.value)
      try {
        let res = null
        const storageData: string = localStorage.getItem(`MINITOOLBOX_oilPrice_data`) || ''
        if(!limitedTime('oilPrice', 1) && storageData && curArea.value === curAreaCache) {
          options.value = JSON.parse(storageData)
          console.log('oilPrice---读取了缓存')
          return
        }
        console.log('oilPrice---重新请求了')
        curAreaCache = curArea.value // 缓存一下请求的值
        localStorage.setItem(`MINITOOLBOX_oilPrice_data`, curAreaCache)
        res = await getArea(curArea.value)
        const data: object | any = res?.data.data || {}
        if (data) {
          const names: Array<string> = []
          Object.keys(data).forEach((key: any) => {
            if (['t0', 't89', 't92', 't95', 't98'].includes(key)) {
              names.push(key)
            }
          })
          names.forEach(key => {
            options.value.push({
              name: key,
              price: data[key]
            })
          })
          console.log(options.value)
          localStorage.setItem(`MINITOOLBOX_oilPrice_data`, JSON.stringify(options.value))
        }
      } catch (e: any) {
        ElMessage.error(e)
      }
    }
    return {
      logo,
      curArea,
      Areas,
      onSel,
      toQuery,
      options
    }
  }
}
</script>

<style lang="scss">
.oil-price {
  margin: 0 auto;
  width: 90%;
  //height: 100%;
  .oil-price-title {
    display: flex;
    justify-content: space-between;
  }

  .area-select {
    margin-right: 10px;
  }

  .name-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
</style>
